<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>记录日常</title>
    <script src="/static/js/mui.min.js"></script>
    <link href="/static/css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>

    <style type="text/css">
        pre {
            margin-top: 10px;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            margin-top: 8px;
            font-family: 微软雅黑;
            color: #8f8f94;
            font-size: 14px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .remark {
            font-size: 26px;
            color: red;
            font-weight: bold;
            display: none;
        }

        #imgBox img {
            display: inline;
            width: 30%;
            height: 30%;
            margin: 5px auto;
            margin-right: 5px;
        }

        #fullPage {
            display: none;
            background: black;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 19930428;
        }

        #fullPage img {
            display: block;
            width: 100%;
        }

        #canvas {
            width: 100%;
            height: 100%;
            background: none;
            display: block;
        }

        #doDelete, #doCommont {
            height: 30px;
            font-size: 12px;
            margin-left: 2px;
        }

        .time {
            margin-left: 54px;
            margin-top: 2px;
        }

    </style>
</head>
<body>

<!-- 图片预览 -->
<div id="fullPage">
    <canvas id="canvas"></canvas>
</div>
<div class="remark">提示：该效果仅支持移动端</div>

<header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-left-nav mui-pull-left" href="/menu/index"><span style="font-size: 18px">首页</span></a>
    <h1 class="mui-title">小日常</h1>
    <a class="mui-icon mui-icon-bars mui-pull-right" href="#popover" id="openPopover"></a>
</header>

<div id="popover" class="mui-popover">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a href="/tops/toTops">小日常首页</a></li>
        <li class="mui-table-view-cell"><a href="/tops/toPublish">发表新想法</a></li>
    </ul>
</div>

<div id="more" class="mui-popover">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a id="commont" onclick="doCommont($(this).attr('value'),$(this).attr('flag'))">评论</a></li>
        <li class="mui-table-view-cell"><a id="delete" onclick="doDelete($(this).attr('value'),$(this).attr('flag'))">删除</a></li>
    </ul>
</div>

<ul class="mui-table-view" style="margin-top: 44px">
    <li class="mui-table-view-cell mui-media" th:each="top: ${topsList}" th:id="${top.tops.id}">
        <a href="javascript:;">
            <img th:if="${top.tops.userId == 1}" class="mui-media-object mui-pull-left"
                 src="/static/img/boy.jpg" style="max-width:44px; min-height: 44px; ">
            <img th:if="${top.tops.userId == 2}" class="mui-media-object mui-pull-left"
                 src="/static/img/girl.jpg" style="max-width:44px; min-height: 44px; ">
            <div class="mui-media-body">
                <span style="color: #6495ED" th:text="${top.tops.realname}"></span>
                <pre th:text="${top.tops.content}"></pre>
                <div class="mui-card-content mui-row" id="imgBox">
                    <img th:each="img :${top.galleryList}" th:src="${img.url}+'?x-oss-process=image/auto-orient,1'", th:alt="${img.fileName}" class="mui-col-xs-3"/>
                </div>
            </div>
            <div class="time">
                <h6 style="float: left;" th:text="${#dates.format(top.tops.createTime, 'yyyy-MM-dd hh:mm:ss')}"></h6>
                <a class="mui-icon mui-icon-more mui-pull-right openMore" th:id="openMore+${top.tops.id}" th:onclick="render([[${top.tops.id}]],0)"></a>
            </div>

            <div style="margin-left: 50px;">
                <div th:each="commList: ${top.commentsList}">
                    <div th:each="comm:${commList}">
                        <div style="width: 100%;display: flex;box-sizing: border-box; background: #F8f8f8;">
                            <div style="width: 88%;justify-content: flex-start; margin-left: 8px;">
                                <pre th:text="${comm.content}" style="font-size: 10px"></pre>
                            </div>
                            <div style="width:10%;justify-content: flex-end; margin-top: 5px">
                                <a class="mui-icon mui-icon-more mui-pull-right openMore"  th:id="openMore+${comm.id}" th:onclick="render([[${comm.id}]],1)"></a>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </a>
    </li>
</ul>
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="/static/js/wxScale.js" type="text/javascript"></script>

<script>

    $(document).ready(function () {

        //初始化
        var wxScale = new WxScale({
            fullPage: document.querySelector("#fullPage"),
            canvas: document.querySelector("#canvas")
        });
        var imgBox = document.querySelectorAll("#imgBox img"); //为需要的图片添加放大功能
        for (var i = 0; i < imgBox.length; i++) {
            imgBox[i].onclick = function (e) {
                wxScale.start(this); //这里的this指向需要放大的这张图片
            }
        }
    });

    // 渲染弹出层并设置id
    //有个比较坑的问题是，Mui的弹出层不能在循环中渲染，因此必须要手动将对应数据的id传递给它。
    //还有一个需要注意的是，要在做处理的时候手动隐藏弹出层
    //flag： 0- 评论， 1-回复
    function render(topsId,flag) {
        //设置id
        document.getElementById("commont").setAttribute("value",topsId);
        document.getElementById("delete").setAttribute("value",topsId);
        //设置flag
        document.getElementById("commont").setAttribute("flag",flag);
        document.getElementById("delete").setAttribute("flag",flag);
        mui('.mui-popover').popover('toggle',document.getElementById("openMore"+topsId));
    }


    //删除
    function doDelete(topsId,flag) {

        var data = {
            "topsId": topsId,
            "flag":flag
        };
        //关闭弹出层
        mui('.mui-popover').popover('hide',document.getElementById("openMore"+topsId));


        mui.confirm('确认要删除这条日常吗', '亲爱哒',['确定','取消'], function(e) {
            if (e.index == 0) {
                $.ajax(
                    {
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        url: "/tops/deleteTops",
                        data: data,
                        dataType: "json",
                        //请求成功
                        success: function (result) {
                            if (result != null && result != '' && result.status == 200) {
                                mui.toast('删除成功啦',{ duration:'long', type:'div'})
                            } else {
                                mui.toast('删除失败了哦',{ duration:'long', type:'div'})
                            }
                            setTimeout(function () {
                                window.location.reload()
                            }, 1500);

                        },
                        async: false
                    });
            } else {

            }
        })
    }

    function doCommont(topsId,flag) {
        //关闭弹出层
        mui('.mui-popover').popover('hide',document.getElementById("openMore"+topsId));

        //弹出评论窗体
        mui.prompt('请输入您的评论哈','','评论',['提交','取消'],function (e) {
            if (e.index == 0){
                var data = {
                    "topId": topsId,
                    "content":e.value,
                    "flag":flag
                };
                $.ajax(
                    {
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        url: "/tops/doCommont",
                        data: data,
                        dataType: "json",
                        //请求成功
                        success: function (result) {

                            if (result != null && result != '' && result.status == 200) {
                                mui.toast('发表成功啦',{ duration:'long', type:'div'})
                            } else {
                                mui.toast('发表失败了哦',{ duration:'long', type:'div'})
                            }
                            setTimeout(function () {
                                window.location.reload()
                            }, 1500);

                        },
                        async: false
                    });
            }

        },'div');
    }


</script>


</body>
</html>